<template>
  <div class="overflow-x-hidden">
    <!-- Hero Section - 炫酷的动态渐变背景 -->
    <section
      class="gradient-animation min-h-screen flex items-center justify-center relative overflow-hidden"
    >
      <div class="fade-in text-center z-10 p-8 max-w-[800px]">
        <h1
          class="text-[clamp(2.5rem,8vw,5rem)] font-bold mb-6 text-white drop-shadow-[0_4px_20px_rgba(0,0,0,0.3)]"
        >
          你好，我是 <span class="highlight inline-block relative">DHL</span> 👋
        </h1>
        <p class="text-[clamp(1.1rem,3vw,1.5rem)] text-white/90 mb-10 font-normal">
          一个热爱技术的开发者 | 分享我的思考与创作
        </p>
        <div class="flex gap-6 justify-center flex-wrap max-md:flex-col max-md:w-full">
          <NuxtLink to="/blog" class="btn btn-gradient hover-lift max-md:w-full">
            查看博客
          </NuxtLink>
          <NuxtLink to="/blog" class="btn btn-outline-hero hover-lift max-md:w-full">
            我的简历
          </NuxtLink>
        </div>
      </div>

      <!-- 浮动装饰元素 -->
      <div class="absolute w-full h-full overflow-hidden z-[1]">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
        <div class="shape shape-4"></div>
        <div class="shape shape-5"></div>
      </div>
    </section>

    <!-- 特色卡片区 -->
    <section class="bg-bg-primary py-16">
      <div class="max-w-[1200px] mx-auto px-8 py-16">
        <h2
          class="section-title gradient-text text-[clamp(2rem,5vw,3rem)] font-bold text-center mb-12"
        >
          我能做什么
        </h2>

        <div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-8">
          <div
            class="feature-card card hover-lift fade-in text-center py-10 px-8"
            style="animation-delay: 0.1s"
          >
            <div class="text-[3.5rem] mb-6 drop-shadow-[0_4px_8px_rgba(0,0,0,0.1)]">💻</div>
            <h3 class="text-xl mb-4 text-text-primary">前端开发</h3>
            <p class="text-text-secondary leading-relaxed">使用现代化框架构建优雅的用户界面</p>
          </div>

          <div
            class="feature-card card hover-lift fade-in text-center py-10 px-8"
            style="animation-delay: 0.2s"
          >
            <div class="text-[3.5rem] mb-6 drop-shadow-[0_4px_8px_rgba(0,0,0,0.1)]">🎨</div>
            <h3 class="text-xl mb-4 text-text-primary">UI设计</h3>
            <p class="text-text-secondary leading-relaxed">创造美观且易用的设计体验</p>
          </div>

          <div
            class="feature-card card hover-lift fade-in text-center py-10 px-8"
            style="animation-delay: 0.3s"
          >
            <div class="text-[3.5rem] mb-6 drop-shadow-[0_4px_8px_rgba(0,0,0,0.1)]">📱</div>
            <h3 class="text-xl mb-4 text-text-primary">响应式设计</h3>
            <p class="text-text-secondary leading-relaxed">适配各种设备的完美体验</p>
          </div>

          <div
            class="feature-card card hover-lift fade-in text-center py-10 px-8"
            style="animation-delay: 0.4s"
          >
            <div class="text-[3.5rem] mb-6 drop-shadow-[0_4px_8px_rgba(0,0,0,0.1)]">⚡</div>
            <h3 class="text-xl mb-4 text-text-primary">性能优化</h3>
            <p class="text-text-secondary leading-relaxed">追求极致的加载速度与流畅度</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 最新博客 -->
    <section class="bg-bg-secondary py-16">
      <div class="max-w-[1200px] mx-auto px-8 py-16">
        <div
          class="flex justify-between items-center mb-12 flex-wrap gap-4 max-md:flex-col max-md:items-start"
        >
          <h2 class="section-title gradient-text text-[clamp(2rem,5vw,3rem)] font-bold">
            最新文章
          </h2>
          <NuxtLink
            to="/blog"
            class="text-text-secondary no-underline font-medium transition-all duration-300 hover:text-[#667eea] hover:translate-x-1"
          >
            查看全部 →
          </NuxtLink>
        </div>

        <div class="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-8">
          <div
            class="post-card glass hover-lift fade-in p-8 cursor-pointer"
            style="animation-delay: 0.1s"
          >
            <div
              class="inline-block px-4 py-1.5 bg-rainbow-gradient text-white rounded-[20px] text-sm font-semibold mb-4"
            >
              技术
            </div>
            <h3 class="text-xl mb-3 text-text-primary">开始使用 Nuxt 3 构建现代化应用</h3>
            <p class="text-text-secondary mb-6 leading-relaxed">
              探索 Nuxt 3 的强大功能和最佳实践...
            </p>
            <div class="flex gap-6 text-sm text-text-secondary">
              <span>📅 2025-01-15</span>
              <span>⏱️ 5 分钟</span>
            </div>
          </div>

          <div
            class="post-card glass hover-lift fade-in p-8 cursor-pointer"
            style="animation-delay: 0.2s"
          >
            <div
              class="inline-block px-4 py-1.5 bg-rainbow-gradient text-white rounded-[20px] text-sm font-semibold mb-4"
            >
              设计
            </div>
            <h3 class="text-xl mb-3 text-text-primary">如何打造炫酷的渐变色设计</h3>
            <p class="text-text-secondary mb-6 leading-relaxed">
              从色彩理论到实践应用的完整指南...
            </p>
            <div class="flex gap-6 text-sm text-text-secondary">
              <span>📅 2025-01-10</span>
              <span>⏱️ 8 分钟</span>
            </div>
          </div>

          <div
            class="post-card glass hover-lift fade-in p-8 cursor-pointer"
            style="animation-delay: 0.3s"
          >
            <div
              class="inline-block px-4 py-1.5 bg-rainbow-gradient text-white rounded-[20px] text-sm font-semibold mb-4"
            >
              生活
            </div>
            <h3 class="text-xl mb-3 text-text-primary">我的 2024 年度总结</h3>
            <p class="text-text-secondary mb-6 leading-relaxed">回顾过去一年的成长与收获...</p>
            <div class="flex gap-6 text-sm text-text-secondary">
              <span>📅 2025-01-01</span>
              <span>⏱️ 10 分钟</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA 区域 -->
    <section class="py-24 px-8 bg-bg-primary">
      <div class="glass max-w-[700px] mx-auto text-center py-16 px-12 rounded-[30px]">
        <h2 class="gradient-text text-[clamp(2rem,5vw,3rem)] mb-4">让我们一起创造精彩</h2>
        <p class="text-xl text-text-secondary mb-10">如果你对我的项目感兴趣，或者想要合作交流</p>
        <a href="mailto:your@email.com" class="btn btn-gradient hover-lift"> 联系我 </a>
      </div>
    </section>
  </div>
</template>

<script setup>
useHead({
  title: '首页',
})
</script>

<style scoped>
/* Hero 按钮样式 - 特殊样式需要保留 */
.btn-outline-hero {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.btn-outline-hero:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Highlight 样式 */
.highlight {
  background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: white;
  opacity: 0.3;
  border-radius: 4px;
}

/* 浮动装饰形状 */
.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  animation: float 20s infinite ease-in-out;
}

.shape-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.shape-2 {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.shape-3 {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.shape-4 {
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  top: 30%;
  right: 25%;
  animation-delay: 1s;
}

.shape-5 {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, #fa709a, #fee140);
  bottom: 40%;
  right: 10%;
  animation-delay: 3s;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(30px, -30px) rotate(90deg);
  }
  50% {
    transform: translate(-20px, 20px) rotate(180deg);
  }
  75% {
    transform: translate(-30px, -20px) rotate(270deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .shape {
    width: 150px !important;
    height: 150px !important;
  }
}
</style>
